<style scoped>
.layout-con{
  height: 100%;
  width: 100%;
}
.menu-item span{
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}
.menu-item i{
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span{
  width: 0;
  transition: width .2s ease;
}
.collapsed-menu i{
  transform: translateX(5px);
  transition: font-size .2s ease .2s, transform .2s ease .2s;
  vertical-align: middle;
  font-size: 22px;
}
.back-icon:hover {
  background-color: lightgray;
  border-radius: 5px;
  cursor: pointer;
}
.dev-run-preview .dev-run-preview-edit{ display: none }
.centered-menu {
  text-align: center;
}

.large-font {
  font-size: 20px;
}
.head_title{
  margin-right: 14px;
  font-size: 28px;
  line-height: 42px;
  color: #f5ebeb;
  text-decoration: none;
}
</style>
<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
      <Sider  :collapsed-width="78" v-model="isCollapsed">
        <div style="height: 64px">
          <div style="background-color: #515a6e; height: 64px; display: flex; justify-content: center; align-items: center;">
            <a  href="" class="head_title">运维管理平台</a>
          </div>
        </div>
        <Menu  :open-names="['1']" :active-name="$route.meta.menuItem" @on-select="handleMenuClick" accordion theme="dark" width="auto" :class="menuitemClasses">
          <Submenu name="1">
            <template #title>
              <Icon type="ios-paper" />
              项目管理
            </template>
            <MenuItem name="1-1">地址列表</MenuItem>
            <MenuItem name="1-2">端口列表</MenuItem>
<!--            <MenuItem name="1-3">K8S集群</MenuItem>-->
            <MenuItem name="1-4">平台列表</MenuItem>
          </Submenu>
<!--          <Submenu name="2">-->
<!--            <template #title>-->
<!--              <Icon type="ios-people" />-->
<!--              用户管理-->
<!--            </template>-->
<!--            <MenuItem name="2-1">用户列表</MenuItem>-->
<!--            <MenuItem name="2-2">角色列表</MenuItem>-->
<!--          </Submenu>-->
<!--          <Submenu  name="3">-->
<!--            <template #title>-->
<!--              <Icon type="ios-stats" />-->
<!--              统计分析-->
<!--            </template>-->
<!--            <MenuGroup title="使用">-->
<!--              <MenuItem name="3-1">新增和启动</MenuItem>-->
<!--              <MenuItem name="3-2">活跃分析</MenuItem>-->
<!--              <MenuItem name="3-3">时段分析</MenuItem>-->
<!--            </MenuGroup>-->
<!--            <MenuGroup title="留存">-->
<!--              <MenuItem name="3-4">用户留存</MenuItem>-->
<!--              <MenuItem name="3-5">流失用户</MenuItem>-->
<!--            </MenuGroup>-->
<!--          </Submenu>-->
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">

        </Header>
        <Content :style="{padding: '0 16px 16px'}">
          <div>
            <Breadcrumb :style="{ margin: '16px 0', fontSize: '18px' ,color:'#333' }">
              <Icon type="md-arrow-back"  :class="{ 'back-icon': !isHover }" @mouseover="isHover = true"   @mouseleave="isHover = false" :style="{ fontSize: '22px' }" @click="goBack"  v-if="!isProjectMenu()" />
              <BreadcrumbItem v-for="(breadcrumb, index) in breadcrumbs" :key="index">
                {{ breadcrumb }}
              </BreadcrumbItem>
            </Breadcrumb>
          </div>
          <Card>
            <div >
              <router-view></router-view>
            </div>
          </Card>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
export default {
  name: 'AppHome',
  components:{
  },
  data () {
    return {
      isHover: false,
      isCollapsed: false,
      breadcrumbs :[ ]  // 初始化面包屑
    };
  },

  watch: {
    $route(newValue) {
      this.updateBreadcrumbs(newValue); // 监听路由变化，更新面包屑名称
    }
  },
  computed: {
    menuitemClasses: function () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  methods:{
    handleMenuClick(name) {
      if (name === '1-1'){
        this.$router.push('/dashboard/addresslist');
      }else  if( name === '1-2'){
        this.$router.push('/dashboard/portlist')
      }else  if( name === '1-3'){
        this.$router.push('/dashboard/k8slist')
      }else  if( name === '1-4'){
        this.$router.push('/dashboard/projectlist')
      }else  if( name === '2-1'){
        this.$router.push('/dashboard/users')
      }else  if( name === '2-2'){
        this.$router.push('/dashboard/users/roles')
      }
      // 更新面包屑
      this.updateBreadcrumbs();
    },
    updateBreadcrumbs() {
      const matchedRoutes = this.$route.matched;
      const breadcrumbs = matchedRoutes.map(route => route.name).slice(1);
      this.breadcrumbs = breadcrumbs;
    },
    goBack() {
      if (this.$route.name === "漏洞修复详情") {
        this.$router.push("/dashboard/projectlist/projectdetails?company=1001&tab=name4");
      } else if (this.$route.name === "平台详情") {
        this.$router.push({ name: "平台列表" });
      } else {
        this.$router.go(-1);
      }
    },
    isProjectMenu() {
      const matchedRoutes = this.$route.matched;
      let isProject = false;
      matchedRoutes.forEach(route => {
        if (route.name === "地址列表" ||
            route.name === "端口列表" ||
            route.name === "K8s集群" ||
            route.name === "平台列表" ||
            route.name === "用户列表" ||
            route.name === "角色列表")
        {
          isProject = true;
        }
      });
      return isProject;
    },
  },
  created() {
    // 初始化面包屑
    this.updateBreadcrumbs();
  }
}
</script>
